<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="cancel" width="50%">
    <template slot="title">
      <span >黑名单群组调整</span>
    </template>
    <el-form
    ref="refForm"
    :rules="refRule"
    :disabled="loading"
    :model="form" class="demo-form-inline">
    <el-form-item prop="levelId" class="relative">
      <div class="flex-box">
        <p><b>{{rowData.blackType | switchType}}:</b><span>{{rowData.blackTitle}}</span></p>

        <p><b>当前群组:</b><span>{{rowData.levelName}}</span></p>
        <div>
          <b class="label">调整为:</b>
          <el-select v-model="form.level">
            <el-option
            v-for="item in levelList"
            :label="item.levelName"
            :key="item.levelId"
            :value="item.levelId"
          ></el-option>
          </el-select>
        </div>

      </div>
    </el-form-item>
    <el-form-item prop="remark" >
      <el-col>
        <slot name="label">
          <div class="label"><b class="red">*</b>备注</div>
        </slot>
        <el-input type="textarea" placeholder="请输入备注" rows="3" v-model.trim="form.remark" maxlength="22">
        </el-input>
      </el-col>
    </el-form-item>
    <div style="text-align:right">
      <el-button class="filter-item"
                 @click="cancel">取消
      </el-button>
      <el-button class="filter-item" type="primary"
                 @click="toSave">确认
      </el-button>
    </div>
  </el-form>
  </el-dialog>
</template>
<script>
import { form, grid, factory } from '@/build';
import { updateBlackListLeval } from '@/services/api/risk';

export default {
  name: 'level-dialog',
  mixins: [form, grid, factory],
  props: ['dialogVisible', 'rowData', 'levelList'],
  data() {
    return {
      inValidateUsers: [],
      form: {
        id: '',
        level: undefined,
        remark: undefined,
        oldLevel: undefined,
        blackType: undefined,
        blackTitle: '',
      },
      refRule: {
        level: [
          { required: true, message: '黑名单等级为必选项', trigger: 'change' },
        ],
        remark: [
          { required: true, message: '备注不能为空' },
        ],
      },
      amountError: '',
    };
  },
  filters: {
    switchType(blackType) {
      return _.find(consts.BLACK_LIST_TYPE, { value: blackType.toString() }).label;
      // let type = '';
      // switch (blackType) {
      //   case 0:
      //     type = '账号';
      //     break;
      //   case 1:
      //     type = 'IP';
      //     break;
      //   case 2:
      //     type = '设备号';
      //     break;
      //   case 3:
      //     type = '银行卡';
      //     break;
      //   case 4:
      //     type = '手机号';
      //   case 5:
      //     type = '姓名';
      //     break;
      //   default:
      //     break;
      // }
      // return type;
    },
  },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
    toSave() {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          this.doGet({ action: 'updateLeval' });
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    // this.form.id = this.rowData.id;
    // this.form.oldLevel = this.rowData.level;
    // this.form.level=this.rowData.level;
    // this.form.remark = this.rowData.remark;
    // this.form.blackTitle = this.rowData.blackTitle;
    // this.form.blackType = this.rowData.blackType;
    // alert(this.rowData.blackType);
    Object.keys(this.form).forEach((key) => {
      if (this.rowData[key]) {
        this.form[key] = this.rowData[key];
      }

    });
    this.form.blackType = this.rowData.blackType;
    this.form.oldLevel = this.rowData.level;
    this.getAll();
    this.bindGet(updateBlackListLeval, '', {
      action: 'updateLeval',
      sendingData: 'form',
      successMessage: '调整成功',
      callback: () => {
        this.$emit('cancel');
        this.$parent.getAll();
      },
    });
  },

};
</script>

<style lang="scss" scoped>
.relative{position: relative}
 .red{color:#f56c6c !important;}
.flex-box{display: flex;justify-content: space-between;align-items: center;}
/deep/ .flex-box+.el-form-item__error{text-align: right;box-sizing: border-box !important;position: absolute;right:70px;top:43px}
.flex-box b{margin-right:3px}
</style>
